layui.use(['layer', "form"], function() {
  let layer = layui.layer;
  let form = layui.form;

  // *******************************************列表获取
  function getList() {
    $.ajax({
      url: "/my/article/cates",
      success: function(res) {
        if (res.status == 0) {
          // 
          let str = "";
          res.data.forEach(item => {
            str += `<tr>
                    <td>${item.name}</td>
                    <td>${item.alias}</td>
                    <td>
                      <button myid="${item.Id}" name="${item.name}" alias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
                      <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                    </td>
                  </tr>`;
          });

          $("tbody").html(str);
        }
      }
    });
  }
  getList();



  // ***************************************** 新增
  let add_str = `<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
                <div class="layui-form-item">
                  <label class="layui-form-label">类别名称</label>
                  <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">类别别名</label>
                  <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
               </form>`;

  $('#add').click(function() {
    // 1.先有弹窗：number类型：用于提交成功后，关闭弹窗！layer.close(index);
    let index = layer.open({
      type: 1,
      title: "新增",
      content: add_str,
      area: ['400px', '260px'],
    });

    // 2.给弹窗中form注册事件 注册提交事件；
    $("#add_form").on("submit", function(e) {
      e.preventDefault();

      // 1.收集数据
      let data = $("#add_form").serialize();

      // 2.提交数据
      $.ajax({
        url: "/my/article/addcates",
        type: "POST",
        data,
        success: function(res) {
          layer.msg(res.message);

          if (res.status == 0) {
            layer.close(index); // 关闭弹窗
            getList(); // 再次请求列表数据
          }
        }
      });


    });

  });




  // ***************************************** 删除
  // 1.事件委托
  $("tbody").on("click", ".delete", function() {
    // 2.获取id;（有id）
    let id = $(this).attr("myid");

    // 3.友好：询问弹窗：
    layer.confirm('确认删除么?', { icon: 3, title: '删除提示' }, function(index) {

      $.ajax({
        url: "/my/article/deletecate/" + id,
        success: function(res) {
          layer.msg(res.message);
          if (res.status == 0) {
            layer.close(index); // 关闭弹窗
            getList(); //重新加载列表
          }
        }
      })


    });

  })







  // ***************************************** 编辑
  let edit_str = `<form class="layui-form edit-form" action="" lay-filter="box" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="abc">
  <div class="layui-form-item">
    <label class="layui-form-label">类别名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">类别别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="hidden" name="Id">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
  </div>
</form>`;

  $("tbody").on("click", ".edit", function() {
    // 1。获取对应点击的id  name  alias（得有这些东西）
    let Id = $(this).attr("myid");
    let name = $(this).attr("name");
    let alias = $(this).attr("alias");


    // 2.1 弹窗出现
    let index = layer.open({
      type: 1,
      title: "编辑",
      content: edit_str,
      area: ['400px', '260px'],
    });


    // 2.2  数据回填！！
    form.val("box", {
      Id: Id,
      name: name,
      alias: alias
    });


    // 用户可以提交：提交事件！
    $(".edit-form").on("submit", function(e) {
      e.preventDefault();

      // 1.收集数据
      let data = form.val("box");

      // 2.提交数据
      $.ajax({
        url: "/my/article/updatecate",
        type: "POST",
        data,
        success: function(res) {
          layer.msg(res.message);

          if (res.status == 0) {
            layer.close(index); // 关闭弹窗
            getList(); // 再次请求列表数据
          }
        }
      });



    })



  });


});